<template>
  <v-chart
    ref="vChartRef"
    :option="option"
    autoresize
    style="width: 100%; height: 320px; "
  ></v-chart>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import VChart, { THEME_KEY } from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";
// const props = defineProps({
//   themeColor: {
//     type: String || Object || Array,
//     default: 'dark'
//   }
// })
const option = ref({
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  // tooltip: {
  //   show: true,
  //   trigger: "axis",
  //   axisPointer: {
  //     show: true,
  //     type: "shadow",
  //   },
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },
  xAxis: [
    {
      type: 'category',
      // axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      // label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]
});
use([
  DatasetComponent,
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);
const setData = (data) => {
  option.value = {
    title: {
      text: data.title,
      left: "center",
      top: 5,
    },

    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "20%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    legend: {
      data: data.legendData || []
    },
    xAxis: {
      type: "category",
      data: data.xAxisData,
      // axisLabel: {
      //   inside: false, // 标签刻度朝内
      //   margin: 10, // 清除默认间距
      //   padding: [0, 10, 0, 0], // 右边内边距10
      //   textStyle: {
      //     align: "right", // 文字右对齐
      //   },
      // },
    },
    yAxis: {
      type: "value",
    },

    backgroundColor: "#ffffff",
    series: data.seriesData || []
    // series: [
    //   {
    //     name: "",
    //     type: data.type || "bar",
    //     data: data.data,
    //     itemStyle: {
    //       //通常情况下：
    //       normal: {
    //         color: function (params) {
    //           var colorList = [
    //             "rgb(42,170,227)",
    //             "rgb(234,220,38)",
    //             "rgb(255, 36, 36)",
    //             "rgb(83, 240, 35)",
    //           ];
    //           return colorList[params.dataIndex];
    //         },
    //       },
    //       //鼠标悬停时：
    //       emphasis: {
    //         shadowBlur: 10,
    //         shadowOffsetX: 0,
    //         shadowColor: "rgba(0, 0, 0, 0.5)",
    //       },
    //     },
    //   },
    // ],
  };
};
defineExpose({
  setData,
});
</script>
